<template>
  <TableView class="table">
    <template #table>
      <div style="background-color: #ebeceb; width: 100%; height: 100%; padding: 10rem">
        <NSpin :show="spinShow">
          <n-calendar :theme-overrides="cellModalTheme" @panel-change="handlePanelChange">
            <template #default="{ year, month, date }">
              <div class="main" @click="goToInfo(year, month, date)">
                <div class="topNave">{{ date }}</div>
                <div class="content">
                  <div class="peopleCount">
                    {{ handlePeopleCount(year, month, date) }}
                  </div>
                  <NEllipsis :line-clamp="2">
                    {{ handlePeopleName(year, month, date) }}
                  </NEllipsis>
                </div>
              </div>
            </template>
          </n-calendar>
        </NSpin>
      </div>
    </template>
  </TableView>

  <NModal :auto-focus="false" v-model:show="modalVisible">
    <ModalCard title="值班排班详情" @close="modalVisible = false">
      <div style="padding:0 0 18rem 0">
        <VWorkDutyInfo :timeDate="timeDate" @close="modalVisible = false" />
      </div>
    </ModalCard>
  </NModal>
</template>
<script setup lang="ts">
import { useMessage, NCalendar, NEllipsis, NSpin, NModal } from 'naive-ui'
import { ref, watch, onMounted, render, h } from 'vue'
import { sendRequest } from '@/utils/api'
import { useRoute } from 'vue-router'
import type { DutyModel } from '@/api/duty'
import type { HttpResponse } from '@/utils/http'
import TableView from '@/components/TableView.vue'
import VContent from '@/views/OA/Office/components/WeekContent.vue'
import ModalCard from '@/components/ModalCard.vue'
import VWorkDutyInfo from './components/WorkDutyInfo.vue'

const message = useMessage()
const route = useRoute()
const cellModalTheme = { cellColorHover: 'none', barColor: 'none', borderColor: 'black' }

// 页码切换
const handlePanelChange = (info: { year: number; month: number }) => {
  const month = info.year + '-' + (Number(info.month) < 10 ? '0' + info.month : info.month)
  getOverTimeList(month)
}
// 查询人数
const handlePeopleCount = (year: any, month: any, date: any) => {
  if (!tableData.value) return
  const timeDate =
    year + '-' + (month < 10 ? '0' + month : month) + '-' + (date < 10 ? '0' + date : date)
  let result = null
  const data = Object.keys(tableData.value)
  const key = data.find((it: any) => it == timeDate)
  if (key) result = '值班人数：' + tableData.value[key]['dutyCount']
  return result
}
// 去详情
const modalVisible = ref(false)
const timeDate = ref()
const goToInfo = (year: any, month: any, date: any) => {
  timeDate.value =
    year + '-' + (month < 10 ? '0' + month : month) + '-' + (date < 10 ? '0' + date : date)
  modalVisible.value = true
}
// 查询人数名称
const handlePeopleName = (year: any, month: any, date: any) => {
  if (!tableData.value) return
  const timeDate =
    year + '-' + (month < 10 ? '0' + month : month) + '-' + (date < 10 ? '0' + date : date)
  let result = null
  const data = Object.keys(tableData.value)
  const key = data.find((it: any) => it == timeDate)
  if (key) result = '人员名单：' + tableData.value[key]['userNames'].map((it: any) => it).join('，')
  return result
}
// 获取列表
const spinShow = ref(false)
const tableData = ref()
const getOverTimeList = async (month: any) => {
  spinShow.value = true
  const [error, res] = await sendRequest<HttpResponse<DutyModel>>({
    module: 'duty',
    api: 'dutySchedule',
    override: {
      params: {
        month
      }
    }
  })
  spinShow.value = false
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  tableData.value = res.data.dailyDuties
}
// 创建子节点
const handleWeek = () => {
  const A = document.querySelector('.n-calendar')
  const B = document.querySelector('.n-calendar-dates')
  const C = document.createElement('div')
  render(h(VContent, { BgcColor: 'black' }), C)
  A?.insertBefore(C, B)
}

onMounted(() => {
  handleWeek()
  const date = new Date().toLocaleDateString().split('/')
  const month = date[0] + '-' + (Number(date[1]) < 10 ? '0' + date[1] : date[1])
  getOverTimeList(month)
})
</script>
<style scoped lang="scss">
.table {
  padding: 29rem 30rem 42rem;
}

:deep(.n-calendar) {
  width: 100%;
  height: 100%;
}

::v-deep(.n-calendar-cell) {
  display: flex;
  flex-direction: column;
  cursor: auto;
  padding: 5rem;

  .n-calendar-date {
    display: none;

    .n-calendar-date__date {
      display: none;
    }
  }

  .main {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    .topNave {
      width: 100%;
      flex: 0 0 20%;
      text-align: right;
    }

    .content {
      display: flex;
      flex-direction: column;
      width: 100%;
      flex: 1;
      padding: 0 5rem;
      font-size: 18rem;

      .peopleCount {
        flex: 0 0 30%;
        display: flex;
        align-items: center;
      }
    }
  }
}

:deep(.n-spin-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-spin-content) {
  width: 100%;
  height: 100%;
}

::v-deep(.n-calendar-cell--current .n-calendar-date .n-calendar-date__date) {
  background-color: transparent !important;
  color: black !important;
}
</style>
